<template>
  <form class='repair-form' report-submit>
    <div class="repairContainer">
            <div class='form-wrap'>
                <div class='info-line'>
                  <div class='title'>派单及时</div>
                  <i-rate @change="onChange($event,1)" :value="dispatchTimelyLevel"></i-rate>
                  <div class='value'>{{levels[dispatchTimelyLevel-1]}}</div>
                </div>
                <div class='info-line'>
                  <div class='title'>完成及时</div>
                  <i-rate @change="onChange($event,2)" :value="finishTimelyLevel"></i-rate>
                  <div class='value'>{{levels[finishTimelyLevel-1]}}</div>
                </div>
                <div class='info-line'>
                  <div class='title'>完成质量</div>
                  <i-rate @change="onChange($event,3)" :value="finishQualityLevel"></i-rate>
                  <div class='value'>{{levels[finishQualityLevel-1]}}</div>
                </div>
                <div class='info-line'>
                  <div class='title'>审核意见：</div>
                </div>
                <div class='info-wrap'>
                  <i-row>
                        <i-col span="24" i-class='desc-wrap'>
                          <textarea placeholder="不超过100个字" class='desc' v-model='comment'/>
                        </i-col>
                  </i-row>
                </div>
            </div>
            <div class='btn-line'>
                <button class='btn-default red' @click='noPass'>驳回</button>
                <button class='btn-default' @click='pass'>通过</button>
            </div>
    </div>
    <i-toast id="toast" />
  </form>           
</template>

<script type="text/javascript">
import { mapState ,mapActions} from 'vuex';
import { $Toast } from '@/../static/iview/base/index';
export default {
  data() {
    return {
        orderId:null,
        type:0,
        dispatchTimelyLevel:5,
        finishTimelyLevel:5,
        finishQualityLevel:5,
        noPassUrls:['/order/nopassFaultOrder','/order/nopassInspectOrder','/order/nopassMaintenanceOrder','/order/nopassAffairOrder'],
        passUrls:['/order/closeFaultOrder','/order/closeInspectOrder','/order/closeMaintenanceOrder','/order/closeAffairOrder'],
        levels:['非常差','差','一般','好','非常好']
    }
  },
  onShow(){
    var params = this.$root.$mp.query;
    if(params.orderId) this.orderId = params.orderId;
    if(params.type) this.type = params.type;
  },
  computed:{
    ...mapState(['userInfo'])
  },
  methods:{
      ...mapActions([
          'getOrderDetail'
      ]),
      onChange(event,type){
        let index = event.mp.detail.index;
        if(type==1){
          this.dispatchTimelyLevel = index;
        }else if(type==2){
          this.finishTimelyLevel = index;
        }else if(type==3){
          this.finishQualityLevel = index;
        } 
      },
      noPass(){
        var data = {
              ukey:this.userInfo.ukey,
              comment:this.comment,
              orderId:this.orderId
        };
        this.$http.post({
           url:this.noPassUrls[this.type],
           data
         }).then(res=>{
           if(res.s==0){
             wx.navigateBack({delta:1})
           }
         }).catch(e=>{
           console.log('请求失败',e)
         })
      },
      pass(){
        var data = {
              ukey:this.userInfo.ukey,
              comment:this.comment,
              orderId:this.orderId,
              dispatchTimelyLevel:this.dispatchTimelyLevel,
              finishTimelyLevel:this.finishTimelyLevel,
              finishQualityLevel:this.finishQualityLevel
        };
        this.$http.post({
           url:this.passUrls[this.type],
           data
         }).then(res=>{
           if(res.s==0){
             wx.navigateBack({delta:1})
           }
         }).catch(e=>{
           console.log('请求失败',e)
         })
      },
  }
}
</script>

<style lang='less'>
page{
  height:100%;
  background:#eef7fd;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
.repair-form{                 
  height: 100%
}
.repairContainer{
    height:100%;
    display: flex;
    flex-direction: column;
    .form-wrap{
      flex:1;
      height:50rpx;
      .info-line{
        display: flex;
        align-items: center;
        height: 40rpx;
        line-height: 40rpx;
        padding: 20rpx;
        .title{
          color:#83878a;
          margin-right:20rpx 
        }
        .value{
          color: #338ed4;
          margin-left:20rpx 
        }
      }
      .info-wrap{
        display: flex;
        flex-direction: column;
        margin:20rpx;
        border:1px solid #ddd;
        border-radius:8rpx;
        background: #fff;
        .desc-wrap{
          display: flex;
        }
        .desc{
          flex:1;
          padding: 16rpx;
          height:140rpx;
        }
      }
    }
    .btn-line{
        display: flex;
        justify-content: center;
        padding: 20rpx;
        .btn-default{
            flex:1;
            margin: 0 20rpx;
            background: #1380d3;
            color:#fff!important;
            font-size:36rpx;
            border-radius:40rpx; 
            height: 80rpx;
            line-height: 80rpx;
            max-width: 50%;
            padding: 0;
            &.green{
                background: #59b320;
            }
            &.red{
                background: #ff554d
            }
        }
    }
    
}   
</style>
